<template>
  <div id="app">
    <div>黑马项目</div>
    <div class="head">
      <span class="iconfont iconnew logo"></span>
      <div class="search">
        <input type="text" /> <span class="iconfont iconsearch seek"></span
        ><span class="seektext">搜索新闻</span>
      </div>
      <div class="user-entry">
        <a href="#"><span class="iconfont iconwode"></span></a>
      </div>
    </div>
    <div class="new">
      <a href="#">关注</a>
      <a href="#">头条</a>
      <a href="#">娱乐</a>
      <a href="#">体育</a>
      <a href="#">汽车</a>
      <a href="#">房产</a>
      <a href="#"><span class="iconfont iconjiantou"></span></a>
    </div>
    <router-view />
  </div>
</template>

<style lang="less">
@import url("http://at.alicdn.com/t/font_1426139_h6vn3jbl5q.css");
* {
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

ul,
li,
ol {
  list-style: none;
}
.head {
  width: 100vw;
  height: 13.889vw;
  background: red;
  color: white;
  overflow: hidden;
  .logo {
    margin-left: 4.167vw;
    font-size: 13.889vw;
    float: left;
  }
  .search {
    float: left;
    margin-left: 2.778vw;
    position: relative;
    input {
      background: rgba(204, 204, 204, 0.5);
      border: 0; // 去除未选中状态边框
      outline: none; // 去除选中状态边框
      margin-top: 1.944vw;
      border-radius: 5.556vw;
      width: 54.167vw;
      height: 9.722vw;
      padding-left: 4.167vw;
    }
    .seek {
      position: absolute;
      top: 3.611vw;
      left: 18.833vw;
      font-size: 5.556vw;
    }
    .seektext {
      font-size: 4.167vw;
      position: absolute;
      top: 4.11vw;
      left: 24vw;
    }
  }
  .user-entry {
    span {
      font-size: 8.333vw;
      float: left;
      margin-left: 6.944vw;
      margin-top: 2.5vw;
    }
  }
}
.new {
  width: 100vw;
  height: 12.5vw;
  line-height: 12.5vw;
  background: #e4e4e4;
  a {
    float: left;
    width: 13.889vw;
    height: 12.5vw;
    text-align: center;
    font-size: 4.444vw;
  }
  span {
    display: inline-block;
    transform: rotate(-90deg);
  }
}
</style>
